/* responsive.less */

// Should probably be moved to relevant .less files
// after 4095 selector issue is solved

@media (min-width: 980px) {
  .dir-rtl .navbar .nav.pull-right,
  .dir-rtl .navbar .logininfo {
    float: left;
  }

  .dir-rtl .navbar .nav {
    float: right;
    & > li {
      float: right;
    }
  }
}

@media (min-width: 980px) and (max-width: 1199px) {
  // Wider form labels.
  .form-item .form-label,
  .mform .fitem div.fitemtitle,
  .userprofile dl.list dt,
  .form-horizontal .control-label {
    width: @horizontalComponentOffset980 - 20px;
  }

  .form-item .form-setting,
  .form-item .form-description,
  .mform .fitem .felement,
  #page-mod-forum-search .c1,
  .mform .fdescription.required,
  .userprofile dl.list dd,
  .form-horizontal .controls {
    margin-left: @horizontalComponentOffset980;
  }

  .dir-rtl {
    .form-item .form-setting,
    .form-item .form-description,
    .mform .fitem .felement,
    .mform .fdescription.required,
    .userprofile dl.list dd,
    .form-horizontal .controls {
      margin-right: @horizontalComponentOffset980;
    }
  }

  #page-mod-forum-search.dir-lrt .c1 {
    margin-right: @horizontalComponentOffset980;
  }

  .path-admin .buttons,
  .form-buttons {
    padding-left: @horizontalComponentOffset980;
  }
}

@media (max-width: 873px) {
  .file-picker .fp-repo-area {
    width: 100%;
    height: auto;
    max-height: 220px;
    y-scroll: auto;
    float: none;
    border: 0px;
  }

  .file-picker .fp-repo-items {
    width: 100%;
    float: none;
  }

  .file-picker .fp-login-form .fp-login-input label {
    text-align: left;
  }

  .dir-rtl .file-picker .fp-login-form .fp-login-input label {
    text-align: right;
  }

  .file-picker .fp-content form td {
    display: block;
    width: 100%;
    text-align: left;
  }

  .dir-rtl .file-picker .fp-content form td {
    text-align: right;
  }

  .fp-content .mdl-right {
    text-align: left;
  }

  .dir-rtl .fp-content .mdl-right {
    text-align: right;
  }

  .fp-repo-items .fp-navbar {
    border-top: 1px solid rgb(187, 187, 187);
  }

  .dir-rtl {
    .userprofile dl.list dt,
    .userprofile dl.list dd {
      float: none;
      text-align: right;
      margin-right: 0;
    }
  }

  .fp-formset div {
    height: auto;
  }
}

@media (min-width: 1200px) {
  // Editor on question page
  .path-question {
    #id_answerhdr div.fitem_feditor {
      padding-right: 6px;
    }
  }

  // Login page.
  .loginbox.twocolumns .loginpanel {
    margin-left: 0;
  }

  .loginbox.twocolumns .loginpanel,
  .loginbox.twocolumns .signuppanel {
    width: 48.717948717948715%;
    *width: 48.664757228587014%;
  }

  // Wider form labels.
  .form-item .form-label,
  .mform .fitem div.fitemtitle,
  .userprofile dl.list dt,
  .form-horizontal .control-label {
    width: @horizontalComponentOffset1200 - 20px;
  }

  .form-item .form-setting,
  .form-item .form-description,
  .mform .fitem .felement,
  #page-mod-forum-search .c1,
  .mform .fdescription.required,
  .userprofile dl.list dd,
  .form-horizontal .controls {
    margin-left: @horizontalComponentOffset1200;
  }

  .dir-rtl {
    .form-item .form-setting,
    .form-item .form-description,
    .mform .fitem .felement,
    .mform .fdescription.required,
    .userprofile dl.list dd,
    .form-horizontal .controls {
      margin-right: (@horizontalComponentOffset1200 - 100px);
    }
    #page-mod-forum-search .c1 {
      margin-right: @horizontalComponentOffset1200;
    }
    .form-item .form-label,
    .mform .fitem div.fitemtitle,
    .userprofile dl.list dt,
    .form-horizontal .control-label {
      width: (@horizontalComponentOffset1200 - 120px);
    }

  }

  .path-admin .buttons,
  .form-buttons {
    padding-left: @horizontalComponentOffset1200;
  }

  .dir-rtl {
    .path-admin .buttons,
    .form-buttons {
      padding-right: @horizontalComponentOffset1200;
    }
  }

  // Core empty block regions.
  .fluid-span (@columns) {
    .fluid-span-full(@columns, @fluidGridColumnWidth1200, @fluidGridGutterWidth1200);
  }
  .empty-region-side-post.used-region-side-pre, // Post region is empty and pre region is in use.
  .jsenabled.docked-region-side-post.used-region-side-pre {
    // All post blocks docked and pre region is in use.
    #region-main.span8 {
      /** increase the span size by 1 **/
      .fluid-span(9);
    }
    #block-region-side-pre.span4 {
      /** decrease the span size by 1 **/
      .fluid-span(3);
    }
  }
}

@media (min-width: 980px) {
  .loginbox.twocolumns .loginpanel {
    margin-left: 0;
  }

  .loginbox.twocolumns .loginpanel,
  .loginbox.twocolumns .signuppanel {
    width: 48.617948717948715%;
    *width: 48.664757228587014%;
  }
}

@media (min-width: 768px) and (max-width: 979px) {
  // Login page.
  .loginbox.twocolumns .loginpanel {
    margin-left: 0;
  }

  .loginbox.twocolumns .loginpanel,
  .loginbox.twocolumns .signuppanel {
    width: 48.61878453038674%;
    *width: 48.56559304102504%;
  }

  // Core empty block regions.
  .fluid-span (@columns) {
    .fluid-span-full(@columns, @fluidGridColumnWidth768, @fluidGridGutterWidth768);
  }
  .empty-region-side-post.used-region-side-pre, // Post region is empty and pre region is in use.
  .jsenabled.docked-region-side-post.used-region-side-pre {
    // All post blocks docked and pre region is in use.
    #region-main.span8 {
      /** increase the span size by 1 **/
      .fluid-span(9);
    }
    #block-region-side-pre.span4 {
      /** decrease the span size by 1 **/
      .fluid-span(3);
    }
  }
}

@media (max-width: 767px) {
  .loginbox.twocolumns .loginpanel,
  .loginbox.twocolumns .signuppanel {
    display: block;
    float: none;
    width: 100%;
    margin-left: 0;
    .box-sizing(border-box);
  }

  #page-mod-quiz-edit div.quizcontents,
  .questionbankwindow.block {
    width: 100%;
    float: none;
  }

  #page-mod-quiz-edit #block-region-side-pre,
  #page-mod-quiz-edit #block-region-side-post {
    clear: both;
  }

}

@media (max-width: 480px) {
  // make tabs act like nav-stacked
  // (mostly) copied from bootstrap/navs.less
  .nav-tabs > li {
    float: none;
  }

  .nav-tabs > li > a {
    margin-right: 0; // no need for the gap between nav items
  }

  .nav-tabs {
    border-bottom: 0;
  }

  .nav-tabs > li > a {
    border: 1px solid #ddd;
    .border-radius(0);
  }

  .nav-tabs > .active > a,
  .nav-tabs > .active > a:hover {
    border: 1px solid #ddd;
  }

  .nav-tabs > li:first-child > a {
    .border-top-radius(4px);
  }

  .nav-tabs > li:last-child > a {
    .border-bottom-radius(4px);
  }

  .nav-tabs > li > a:hover,
  .nav-tabs > li > a:focus {
    border-color: #ddd;
    z-index: 2;
  }

  .fp-content-center {
    display: block;
    vertical-align: top;
  }

  .course-content ul.topics li.section,
  .course-content ul.topics li.section .content,
  .course-content ul.weeks li.section .content,
  .course-content ul.weeks li.section,
  .course-content ul.section {
    margin-right: 0;
    margin-left: 0;
    padding: 0;
  }

  .activityinstance {
    display: block;
  }

  .editing .course-content .section .activity {
    margin-bottom: 0.2em;
    padding-bottom: 0.2em;
    border-bottom: thin solid #eee;
  }

  .course-content .section .activity .commands {
    text-align: right;
  }

  /** Handles display of the activity chooser on small screens **/
  .jsenabled .choosercontainer #chooseform .alloptions {
    max-width: 100%;
  }

  .jsenabled .choosercontainer #chooseform .instruction,
  .jsenabled .choosercontainer #chooseform .typesummary {
    position: static;
  }

  .que .info {
    float: none;
    width: auto;
  }

  .que .content {
    margin: 0;
  }

  .path-mod-choice .horizontal .choices .option {
    display: block;
  }

  .path-mod-forum .forumsearch #search {
    width: 120px;
  }

  .path-mod-forum .forumheaderlist .picture {
    display: none;
  }
}

// Stuart's 2,1,3 layout
@media (min-width: 768px) {
  .row-fluid .desktop-first-column {
    margin-left: 0;
  }

  #page-navbar .breadcrumb-button {
    display: inline;
  }
}

@media (max-width: 767px) {
  .row-fluid .desktop-first-column {
    clear: right;
  }
}

// Forms
@media (max-width: 767px) {
  // Remove the horizontal form styles
  .form-item .form-label,
  .mform .fitem div.fitemtitle {
    // copied from .control-label {
    float: none;
    width: auto;
    padding-top: 0;
    text-align: left;
  }

  .form-item .form-label label {
    display: inline-block;
    margin-right: .5em;
  }

  .form-item .form-setting .form-checkbox {
    margin-top: 0;
  }

  .form-label span.form-shortname {
    display: inline-block;
  }

  .form-item .form-setting,
  .mform .fitem .felement,
  .path-backup .mform .fitem .felement,
  .mform .fdescription.required,
  .form-item .form-description {
    margin-left: 0;
  }

  table#form td.submit,
  .form-buttons,
  #fitem_id_submitbutton,
  .fp-content-center form + div,
  #fgroup_id_buttonar,
  .form-horizontal .form-actions,
  .fitem_fsubmit .felement.fsubmit {
    padding-left: 10px;
    padding-right: 10px;
  }

  #helppopupbox {
    width: auto !important;
    left: 0 !important;
  }
}

// Shrink calender when short on space in block
@media (min-width: 768px) and (max-width: 979px) {
  .block_calendar_month .content,
  .block .minicalendar td {
    padding-left: 0;
    padding-right: 0;
  }
}

.dir-rtl {
  .dropdown-menu {
    right: 0;
    left: auto;
    margin-right: 0px;
  }
  .navbar .nav > li > .dropdown-menu:before {
    right: 9px;
    left: auto;
  }
  .navbar .nav > li > .dropdown-menu:after {
    right: 10px;
    left: auto;
  }
  .dropdown-submenu > a:after {
    margin-right: 0;
    margin-left: -10px;
    float: left;
    border-right-color: #ccc;
    border-left-color: transparent;
    border-width: 5px 5px 5px 0px;
  }
  .dropdown-submenu > .dropdown-menu {
    right: 100%;
    left: auto;
  }
}

@media (max-width: 979px) {
  .nav-collapse {
    height: 0;
    .nav > li > a {
      color: @grayDark;
    }
    .nav > li > a:hover,
    .nav > li > a:focus,
    .dropdown-menu a:hover,
    .dropdown-menu a:focus,
    .dropdown-submenu a:focus,
    .dropdown-submenu a:hover,
    .dropdown-submenu a:active,
    .dropdown-menu > li > a:hover,
    .dropdown-menu > li > a:focus,
    {
      background-image: none;
      color: @grayDark;
    }
  }

  .nav-collapse.active {
    height: auto;
  }

  .path-mod-data .box > table > tbody > tr > td {
    display: block;
  }

  .path-mod-forum .forumheaderlist {
    thead .header {
      font-weight: normal;
      font-size: round(@fontSizeSmall);
    }
    .discussion {
      .author, .replies, .lastpost {
        font-size: round(@fontSizeSmall);
      }
      .replies .unread a {
        padding: 0;
      }
    }
  }
}

@media (max-width: 767px) {
  // Resize, reflow file-picker on small devices
  #filesskin .yui3-panel,
  #filesskin .file-picker.fp-generallayout {
    width: 100%;
    left: 0;
  }

  .userprofile dl.list {
    // copied from dl-horizontal in bootstrap/repsonsive.less
    dt {
      float: none;
      clear: none;
      width: auto;
      text-align: left;
    }
    dd {
      margin-left: 0;
    }
  }

  // Reset the alignment for required label to display inline on mobile devices
  #page-mod-wiki-create .mform .fitem div.fitemtitle {
    float: left;
  }

  // GRID & CONTAINERS
  // -----------------
  // Remove width from containers
  .container {
    width: auto;
  }

  // Fluid rows
  .row-fluid {
    width: 100%;
  }

  .row-fluid .span8.pull-right,
  .row-fluid .span9.pull-right {
    float: none;
  }

  // Undo negative margin on rows and thumbnails
  .row {
    margin-left: 0;
  }

  // Make all grid-sized elements block level again
  [class*="span"],
  .row-fluid [class*="span"] {
    float: none;
    display: block;
    width: 100%;
    margin-left: 0;
    .box-sizing(border-box);
  }

  // We need to specify a more specific selector to reset the width for
  // cases when we have content in the side-pre blockregion but not in the
  // side-post blockregion as there are more specific selectors in
  // core.less which take precedence which break responsiveness.
  .empty-region-side-post.used-region-side-pre, // Post region is empty and pre region is in use.
  .jsenabled.docked-region-side-post.used-region-side-pre {
    // All post blocks docked and pre region is in use.
    #block-region-side-pre.span4,
    #region-main.span8 {
      .fluid-span(12);
    }
  }

  .row-fluid .span12 {
    width: 100%;
    .box-sizing(border-box);
  }

  .row-fluid [class*="offset"]:first-child {
    margin-left: 0;
  }

  div[role=main] {
    margin-bottom: 1em;
  }

  .coursebox {
    .info {
      .name {
        a {
          background-position: 0 13px;
        }
      }
    }
  }

  .category-browse {
    .coursebox {
      .info {
        .name {
          a {
            background-position: 0 13px;
          }
        }
      }
    }
  }
}

// All widths between 1200px and 1600px
@media (min-width: 1200px) and (max-width: 1600px) {
  .fluid-span (@columns) {
    .fluid-span-full(@columns, @fluidGridColumnWidth1200, @fluidGridGutterWidth1200);
  }
  // CSS for the course management pages.
  #course-category-listings.columns-3 {
    background-color: @tableBackground;
    border: 0;

    #category-listing,
    #course-listing {
      .fluid-span(6);
      margin-left: @fluidGridGutterWidth1200;
      *margin-left: @fluidGridGutterWidth1200 - (.5 / @gridRowWidth * 100 * 1%);
      &:first-child {
        margin-left: 0;
      }
    }
    #course-detail {
      .fluid-span(12);
      margin: 1em 0 0;
    }
  }
}

// All widths up to 1199px.
@media (max-width: 1199px) {

  // Editor on question pages
  .path-question {
    #id_answerhdr div.fitem {
      padding-right: 6px;
      padding-left: 4px;
    }
  }

  // CSS for the course management pages.
  #course-category-listings.columns-3 {
    background-color: @tableBackground;
    border: 0;
    #category-listing,
    #course-listing,
    #course-detail {
      .fluid-span(12);
      margin: 0 0 1em 0;
    }
  }

  #page-mod-forum-discuss .discussioncontrols {
    text-align: right;
    .discussioncontrol {
      float: none;
      width: auto;
      display: inline-block;
      margin: 0 3px 0.5em;
      select,
      input {
        margin-bottom: 0;
      }
      &.movediscussion {
        margin-right: 0;
        padding-right: 0;
      }
    }
  }

  #page-mod-forum-discuss.dir-rtl .discussioncontrols {
    text-align: left;
  }
}

// File Picker.
@media (max-width: 768px) {
  .fp-forminset .control-group .controls {
    margin-left: 0;
  }

  .dir-rtl .fp-formset .control-group {
    label.control-label {
      text-align: right;
      float: none;
    }
  }

  .dir-rtl .fp-forminset .control-group {
    label.control-label {
      text-align: right;
      float: none;
    }
    .controls {
      margin-right: 0;
    }
  }
}
